<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	xmlns:th="http://www.thymeleaf.org"
	layout:decorator="/layout/main">
<head>
<title>New Meeting :: Meeting History</title>
</head>
<body>
	<div layout:fragment="content">
		<div class="container">
			<div class="data-grid-item">
				<form id="meeting-form" th:action="@{/addMeeting}" th:object="${meeting}" method="post">
					<div id="add-new-meeting" class="inner-data-grid-item">
						<p class="lead">ADD NEW MEETING</p>
						<div class="row">
							<div class="span5 pull-left">
								<label>Meeting Video Submit Method</label> <select
									name="videoMeetingMethod" class="input-block-level">
									<option value="upload">Upload Meeting</option>
									<option value="record">Record Meeting (Experimental)</option>
								</select>
								<div id="video-section-wrapper">
									<div class="upload-message">
										<div id="upload-alert" class="alert alert-info text-center">
											<p>File extension allowed: .mp4, webm</p>
											<p>No files in queue, you can choose file for upload.</p>
										</div>
									</div>
									<div id="upload-container"></div>
									<p>
										<input type="button" value="Choose file to upload"
											id="meeting-choosefiles" class="btn btn-primary btn-block" />
									</p>
								</div>
	
	
							</div>
							<div class="span6 pull-right">
									<label>Type Of Meeting</label>
									<select id="meeting-type" class="span6 select-block"
										th:field="*{typeOfMeeting}">
										<option value="Daily Meeting" selected="selected">Daily
											Meeting</option>
										<option value="Planning Meeting 1">Planning Meeting 1</option>
										<option value="Planning Meeting 2">Planning Meeting 2</option>
										<option value="Review Meeting">Review Meeting</option>
										<option value="Retrospective Meeting">Retrospective
											Meeting</option>
									</select>
									<label>Meeting Location</label>
									<select id="meeting-location" class="span6 select-block"
										th:field="*{location}">
										<option value="Kanban" selected="selected">Kanban</option>
										<option value="Meeting Room">Meeting Room</option>
										<option value="Online Conference">Online Conference</option>
									</select>
									<label>Description</label>
									<p>
										<textarea id="meeting-description" class="input-block-level"
											th:field="*{description}"></textarea>
									</p>
									<input id="meeting-submit" name="meeting-submit" type="submit"
										class="btn btn-info pull-right" value="Submit Meeting" />
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div layout:fragment="footer">
		<script type="text/javascript" th:src="@{/bundles/tinymce.js}"></script>
		<script type="text/javascript" th:src="@{/bundles/plupload.js}"></script>
		<script th:inline="javascript">
		/*<![CDATA[*/
		jQuery(document).ready(function( $ ) {
			
			var uploader = new plupload.Uploader({
				runtimes : 'gears,html5,silverlight,flash',
				browse_button : 'meeting-choosefiles',
				container : 'upload-container',
				url : /*[[@{/upload}]]*/,
				max_file_size : '1gb',
				flash_swf_url : /*[[@{/resources/assets/libs/plupload/plupload.flash.swf}]]*/,
				silverlight_xap_url : /*[[@{/resources/assets/libs/plupload/plupload.silverlight.xap}]]*/,
				filters : [{
					title : "Video Files",
					extensions : "mp4,webm"
				}],
				multiple_queues : false,
			    multi_selection : false,
			    file_data_name : 'meetingVideo'
			});
			
			
	
			uploader.bind('Init', function(up, params) {
				// Hides the upload-container for preventing the footer from display incorrect.
				$("#upload-container").hide();
			});
	
			// Start uploader script
			uploader.init();
			
			// When file is added
			uploader.bind('FilesAdded', function(up, files) {
				$("#upload-alert").hide();
				if(uploader.files.length > 1) {
					uploader.removeFile(uploader.files[0]);
					uploader.refresh();
				}
				$.each(files, function(i,file) {
					// Create new upload-progress wrapper
					var divUploadProgress = $("<div id='"+file.id+"' class='upload-progress'></div>");
	
					// Upload Info, Progress Bar, Remove
					var divUploadInfo = $("<div class='row'><p id='file-name' class='pull-left span4'>"+file.name+" (<a id='remove-"+file.id+"' href='#'><i class='fui-cross'></i></a>)</p><p id='upload-status' class='text-right pull-right span1'>Ready</p></div>");
					var divProgressBar = $("<div class='progress'><div id='progress-bar' class='bar bar-info'></div></div>");
	
					// Add them to upload-progress wrapper
					$(divUploadProgress).append(divUploadInfo).append(divProgressBar);
	
					// Add upload-progress wrapper to upload-container
					$("#upload-container").append(divUploadProgress);
					
				});
				$("#upload-container").show();
			});
	
			
			
			uploader.bind('BeforeUpload', function(up,file) {
				$("#"+file.id).find("#upload-status").addClass("text-info").text("Uploading");
			});
			
			// Uploader progress
			uploader.bind('UploadProgress', function(up,file) {
				// Update Progress
				$("#"+file.id).find("#file-name").html(file.name+" ("+file.percent+"%)");
				$("#"+file.id).find("#progress-bar").css("width",file.percent+"%");
			});
	
			uploader.bind('FileUploaded', function(up,file) {
				$("#"+file.id).find("#upload-status").removeClass("text-info").addClass("text-success").text("Finished");
			});
	
			uploader.bind('FilesRemoved',function(up,files) {
				// Fade out and remove file item in upload container
				$("a[id^='remove-"+files[0].id+"']").parents(".upload-progress").fadeOut(function(){
					$(this).remove();
				});
	
				if(uploader.files.length == 0)
				{
					if($("#upload-alert").hasClass("alert-error"))
					{
						$("#upload-alert").removeClass("alert-error").addClass("alert-info");
					}
					$("#upload-alert").html("<p>File extension allowed: .mp4, .webm</p><p>No files in queue, you can choose file for upload.</p>");
					$("#upload-alert").show();
					
				}
				
			});
	
			uploader.bind('Error', function(up, error) {
				$("#upload-alert").removeClass("alert-info").addClass("alert-error").text(error.message).show();
			});
	
			$("#upload-container").on("click","a[id^='remove-']", function() {
				// Find file ID
				var fileID = $(this).attr("id").split("-")[1];
				// Remove file
				uploader.removeFile(uploader.getFile(fileID));
				return false;
			});
	
			uploader.bind("UploadComplete", function(up,files) {
				$(location).attr("href", [[@{/}]]);
			});
			
			$("#meeting-submit").bind("click", function() {
// 				if(uploader.files.length != 0)
// 				{
					// Disable all input fields
					$("[id^='meeting-']").prop("disabled",true);
		
					//create new meeting through ajax
 					var addMeetingController = /*[[@{/addMeeting}]]*/;

					$.post(addMeetingController,{
						"typeOfMeeting" : $("#meeting-type").val(),
						"location" : $("#meeting-location").val(),
						"description" : $("#meeting-description").val()
					}, function(data) {
// 								uploader.settings.multipart_params = {
// 										'meetingId' : data.meeting.id
// 								}
// 								uploader.start();
						$(location).attr("href", [[@{/}]]);
					},'json');
// 				} 
// 				else {
// 					$("#upload-alert").removeClass("alert-info").addClass("alert-error").text("No file in queue.").show();
// 				}


				return false;
			});
	
			// TinyMCE config
			$("#meeting-description").tinymce({	
				theme : 'simple',
				script_url : /*[[@{/resources/assets/libs/tinymce/tiny_mce.js}]]*/
			});
		});
		/*]]>*/
	</script>
	</div>
</body>
</html>